﻿<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>会员名册系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- site favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png" />
    <!-- Place favicon.ico in the root directory -->

    <!-- All stylesheet and icons css  -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <link rel="stylesheet" href="assets/css/all.min.css" />
    <link rel="stylesheet" href="assets/css/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/lightcase.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <style>
      .member__content > div {
        display: flex;
        justify-content: space-around;
      }
      .member__content > div > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .member__content > div > div img {
        width: 10px;
        height: 10px;
        margin-left: 3px;
      }
      .member__pagination--right {
        display: flex;
      }
      .default-pagination-page {
        display: flex;
        align-items: center;
      }
      .default-pagination-page input {
        width: 60px;
        height: 40px;
        border: 1px solid #ccc;
        margin: 0 10px;
      }
    </style>
  </head>

  <body>
    <!-- preloader start here -->
    <div class="preloader">
      <div class="preloader-inner">
        <div class="preloader-icon">
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    <!-- preloader ending here -->

    <!-- scrollToTop start here -->
    <a href="#" class="scrollToTop"><i class="fa-solid fa-angle-up"></i></a>
    <!-- scrollToTop ending here -->

    <!-- ================> Page Header section start here <================== -->
    <div
      class="pageheader bg_img"
      style="background-image: url(assets/images/bg-img/pageheader.jpg)"
    >
      <div class="container">
        <div class="pageheader__content text-center">
          <h2>会员名册系统</h2>
        </div>
      </div>
    </div>
    <!-- ================> Page Header section end here <================== -->

    <!-- ================> About section start here <================== -->
    <div class="about about--style3 padding-top pt-xl-0">
      <div class="container">
        <div class="section__wrapper">
          <form>
            <div class="banner__list">
              <div
                class="row align-items-center row-cols-xl-5 row-cols-lg-3 row-cols-sm-2 row-cols-1"
              >
                <div class="col">
                  <label>年龄</label>
                  <div class="row g-3">
                    <div class="col-6">
                      <div class="banner__inputlist">
                        <select class="nianling1">
                          <option value="18" selected>18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                          <option value="31">31</option>
                          <option value="32">32</option>
                          <option value="33">33</option>
                          <option value="34">34</option>
                          <option value="35">35</option>
                          <option value="36">36</option>
                          <option value="37">37</option>
                          <option value="38">38</option>
                          <option value="39">39</option>
                          <option value="40">40</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="banner__inputlist">
                        <select class="nianling2">
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25" selected>25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                          <option value="31">31</option>
                          <option value="32">32</option>
                          <option value="33">33</option>
                          <option value="34">34</option>
                          <option value="35">35</option>
                          <option value="36">36</option>
                          <option value="37">37</option>
                          <option value="38">38</option>
                          <option value="39">39</option>
                          <option value="40">40</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <label>性别</label>
                  <div class="banner__inputlist">
                    <select class="xingbie">
                      <option value="0">全部性别</option>
                      <option value="男">男</option>
                      <option value="女">女</option>
                    </select>
                  </div>
                </div>
                <div class="col-6">
                  <button class="default-btn reverse d-block index1">
                    <span>搜索</span>
                  </button>
                </div>
                <div class="col-6">
                  <button class="default-btn toPage d-block">
                    <span>对比页面</span>
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- ================> About section end here <================== -->

    <!-- ================> Member section start here <================== -->
    <div class="member member--style2 padding-top padding-bottom">
      <div class="container">
        <div class="section__wrapper">
          <div class="member__info mb-4">
            <div class="member__info--left">
              <div class="member__info--filter">
                <div
                  class="default-btn"
                  data-bs-toggle="modal"
                  data-bs-target="#exampleModal"
                >
                  <span>筛选条件 <i class="fa-solid fa-sliders"></i></span>
                </div>
              </div>
              <div class="member__info--count">
                <div class="default-btn"><span>会员总数量</span></div>
                <p>20365587</p>
              </div>
            </div>
            <!-- 这里是排序条件------------------- -->
            <!-- <div class="member__info--right">
              <div class="member__info--customselect right w-100">
                <div class="default-btn"><span>排序条件:</span></div>
                <div class="banner__inputlist">
                  <select>
                    <option value="0">Last Active</option>
                    <option value="1">Oldest</option>
                    <option value="2">Popular</option>
                    <option value="3">Most Active</option>
                  </select>
                </div>
              </div>
            </div> -->
          </div>
          <div class="row g-0 justify-content-center mx-12-none"></div>
          <div class="member__pagination mt-4">
            <div class="member__pagination--left"></div>
            <div class="member__pagination--right">
              <ul class="default-pagination"></ul>
              <div class="default-pagination-page">
                <span>前往</span><input type="number" /><span>页</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ================> Member section end here <================== -->

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">筛选条件</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="banner__list">
                <div class="row align-items-center row-cols-1">
                  <div class="col">
                    <label>年龄</label>
                    <div class="row g-3">
                      <div class="col-6">
                        <div class="banner__inputlist">
                          <select class="nianling1">
                            <option value="18" selected>18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="banner__inputlist">
                          <select class="nianling2">
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25" selected>25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <label>性别</label>
                    <div class="banner__inputlist">
                      <select class="xingbie">
                        <option value="0">全部性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>婚姻</label>
                    <div class="banner__inputlist">
                      <select class="hunyin">
                        <option value="0">全部婚姻</option>
                        <option value="未婚">未婚</option>
                        <option value="离异">离异</option>
                        <option value="丧偶">丧偶</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>身材</label>
                    <div class="banner__inputlist">
                      <select class="shencai">
                        <option value="0">全部身材</option>
                        <option value="偏瘦">偏瘦</option>
                        <option value="匀称">匀称</option>
                        <option value="丰满">丰满</option>
                        <option value="健壮">健壮</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>职业</label>
                    <div class="banner__inputlist">
                      <select class="job">
                        <option value="0">全部职业</option>
                        <option value="公务员">公务员</option>
                        <option value="国企/机关人员">国企/机关人员</option>
                        <option value="医疗从业人员">医疗从业人员</option>
                        <option value="教育从业人员">教育从业人员</option>
                        <option value="私企高管">私企高管</option>
                        <option value="外企高管">外企高管</option>
                        <option value="私营业主">私营业主</option>
                        <option value="自由职业者">自由职业者</option>
                        <option value="其他职业者">其他职业者</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>学历</label>
                    <div class="banner__inputlist">
                      <select class="jiaoyu">
                        <option value="0">全部学历</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>收入</label>
                    <div class="banner__inputlist">
                      <select class="shouru">
                        <option value="0">全部收入</option>
                        <option value="<3000">&lt;3000</option>
                        <option value="3000~5000">3000~5000</option>
                        <option value="5000~10000">5000~10000</option>
                        <option value="10000~50000">10000~50000</option>
                        <option value=">50000">&gt;50000</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <label>爱好</label>
                    <div class="banner__inputlist">
                      <select class="interests">
                        <option value="0">全部爱好</option>
                        <option value="影视">影视</option>
                        <option value="运动">运动</option>
                        <option value="艺术">艺术</option>
                        <option value="美食">美食</option>
                        <option value="阅读">阅读</option>
                        <option value="写作">写作</option>
                        <option value="宅文化">宅文化</option>
                        <option value="数码">数码</option>
                        <option value="科技">科技</option>
                        <option value="摄影">摄影</option>
                        <option value="绘画">绘画</option>
                        <option value="唱歌">唱歌</option>
                        <option value="音乐">音乐</option>
                        <option value="舞蹈">舞蹈</option>
                      </select>
                    </div>
                  </div>
                  <div class="col">
                    <button class="default-btn reverse d-block index2">
                      <span>搜索</span>
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- modal -->
    <!-- All Needed JS -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <!-- <script src="assets/js/all.min.js"></script> -->
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/counterup.js"></script>
    <script src="assets/js/jquery.countdown.min.js"></script>
    <script src="assets/js/lightcase.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/request.js"></script>
    <script>
      $(function () {
        let pageIndex = 1;
        let pagCount = 15;

        function search(data = {}) {
          data = {
            ...data,
            pageIndex,
            pagCount,
          };
          request("/api/pad/UserInfo/list", { type: "post", data })
            .then((res) => {
              if (res.code === 200) {
                installDom(res);
              }
            })
            .catch((e) => {
              console.log(e);
            });
        }
        function installDom(res) {
          function showOrhied(i, length) {
            if (pageIndex <= 3) {
              if (i > 5) {
                return "none";
              }
            } else if (pageIndex >= length - 3) {
              if (i <= length - 5) {
                return "none";
              }
            } else {
              if (i + 2 < pageIndex || i - 2 > pageIndex) {
                return "none";
              }
            }
            return "block";
          }
          $(".member__info--count p").text(res.data.total);

          const pagination = Math.floor(res.data.total / 15);

          let str = `<li>
                <a href="#"><i class="fas fa-chevron-left"></i></a>
              </li>`;
          for (let i = 0; i < pagination; i++) {
            str += `<li class="item" style="display:${showOrhied(
              i + 1,
              pagination
            )}">
                <a href="#"  class="${i === pageIndex - 1 ? "active" : ""}">${
              i + 1
            }</a>
              </li>`;
          }
          str += `<li>
                <a href="#"><i class="fas fa-chevron-right"></i></a>
              </li>`;

          $(".default-pagination").html(str);

          $(".justify-content-center").html(
            res.data.records
              .map((e) => {
                const str = `
                      <img src="/assets/images/五角星${
                        e.zan > 1 ? "" : "空"
                      }.png"></img>
                      <img src="/assets/images/五角星${
                        e.zan > 2 ? "" : "空"
                      }.png"></img>
                      <img src="/assets/images/五角星${
                        e.zan > 3 ? "" : "空"
                      }.png"></img>
                      <img src="/assets/images/五角星${
                        e.zan > 4 ? "" : "空"
                      }.png"></img>
                      <img src="/assets/images/五角星${
                        e.zan > 5 ? "" : "空"
                      }.png"></img>`;

                return `<div class="member__item">
              <div class="member__inner">
              <div class="member__thumb">
                <a style="width: 100%;height: 100%;"  href="member-single.html?memberId=${
                  e.uuid
                }">
                  <img
                  src="${e.touxaing}"
                  alt="member-img"
                /></a>
                <img style="width:30px;height:30px;" class="member__activity" src="/assets/images/皇冠.png" ></img>
              </div>
              <div class="member__content">
                <a href="member-single.html?memberId=${e.uuid}"><h5>${
                  e.nicheng
                }</h5></a>
                <div>
                  <p>${e.jiguan || "保密"}</p>
                  <div>
                    ${str}
                  </div>
                </div>
              </div>
              </div>
              </div>`;
              })
              .join("")
          );
        }
        $(".default-pagination-page input").keypress(function (event) {
          if (event.which === 13) {
            const index = $(".default-pagination-page input").val();
            const length = $(".default-pagination li").length;
            if (index < 1) {
              pageIndex = 1;
            } else if (index > length - 2) {
              pageIndex = length - 2;
            } else {
              pageIndex = index;
            }
            search();
          }
        });
        $(".default-pagination").on("click", "li", function () {
          const index = $(this).index();
          const length = $(".default-pagination li").length;
          if (index === 0) {
            // 上一页
            if (pageIndex > 1) {
              pageIndex -= 1;
            } else {
              pageIndex = 1;
            }
          } else if (index === length - 1) {
            // 下一页
            if (pageIndex < length - 2) {
              pageIndex += 1;
            } else {
              pageIndex = length - 2;
            }
          } else {
            pageIndex = index;
          }
          search();
        });
        $(".reverse").click(function (event) {
          event.preventDefault();
          const index = $(this).attr("class").indexOf("index1") != -1 ? 0 : 1;

          const xingbie = $(".xingbie").eq(index).val();
          const nianling1 = $(".nianling1").eq(index).val();
          const nianling2 = $(".nianling2").eq(index).val();
          if (index == 0) {
            $(".xingbie").eq(1).val(xingbie);
            $(".nianling1").eq(1).val(nianling1);
            $(".nianling2").eq(1).val(nianling2);
          } else {
            $(".xingbie").eq(0).val(xingbie);
            $(".nianling1").eq(0).val(nianling1);
            $(".nianling2").eq(0).val(nianling2);
          }
          const hunyin = $(".hunyin").val();
          const shencai = $(".shencai").val();
          const job = $(".job").val();
          const jiaoyu = $(".jiaoyu").val();
          const shouru = $(".shouru").val();
          const interests = $(".interests").val();

          const data = {
            nianling: {
              nianlingStart: nianling1,
              nianlingEnd: nianling2,
            },
            xingbie: xingbie == 0 ? "" : xingbie,
            hunyin: hunyin == 0 ? "" : hunyin,
            shencai: shencai == 0 ? "" : shencai,
            job: job == 0 ? "" : job,
            jiaoyu: jiaoyu == 0 ? "" : jiaoyu,
            shouru: shouru == 0 ? "" : shouru,
            // interests: interests == 0 ? "" : interests,
          };
          search(data);
        });
        search();
        $(".toPage").click(function (event) {
          event.preventDefault();
          window.location.href = "membership.html";
        });
      });
    </script>
  </body>
</html>
